import React, { Component } from "react";
import { Toast, InputItem } from "antd-mobile";
import Countdown from "../countdown/countdown";
import yhTools from "../../tools/yh";

import "./messageBox.scss";

let codeResp = {}; // 验证码接口返回报文
let OBJS = {};
class MessageBox extends Component {
	constructor(props) {
		super(props);
		this.state = {
			msgSubTitle: "", // 副标题
			showMsgBox: false, // 控制展示验证码弹框
			countDownstatus: "able", // 按钮的状态,
			buttDisabled: true,
			spaceID: "" // 随记生成一个计数
		};
	}

	componentDidMount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.addEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
		let _tempRandom = Math.round(Math.random() * 1000000);
		this.setState({
			spaceID: _tempRandom
		});
	}

	componentWillUnmount() {
		if (window.YHAuthorize) {
			window.YHAuthorize.View.removeEventListener(
				"KeyboardEvent",
				this.keyboardEvent,
				false
			);
		}
	}

	/**
	 * 键盘事件
	 */
	keyboardEvent = obj => {
		let winHeight = document.documentElement.clientHeight;
		document.getElementById(`keybordb_${this.state.spaceID}`).style.height =
			winHeight * obj.heightper + "px";
	};

	/**
	 * 发送短信验证码
	 */
	sendVerificationCode(objs) {
		OBJS = objs;
		Toast.loading("加载中...", 100);
		let _that = this;
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				// Toast.info(res.message, 2);
				_that.setState(
					{
						showMsgBox: true,
						countDownstatus: "able",
						msgSubTitle: res.data.sendSuccessPhone
					},
					() => {
						document.getElementById(
							`keybordb_${this.state.spaceID}`
						).style.height = 0;
					}
				);
				codeResp = res.data;
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	/**
	 * 提交按钮
	 */
	submitButtClick = () => {
		if (this.state.buttDisabled) {
			// 表单验证
			return;
		}
		if (this.props.options.msgSubmitButtStatus === "0") {
			// 正在加载
			return;
		}
		let messageCode = this.state.messageCodeValue;

		let regx = /^[0-9]{6}$/;
		if (regx.test(messageCode)) {
			this.props.options.msgSubmitButtClick(messageCode, codeResp); //底部按钮回调
		} else {
			Toast.info("请输入正确的验证码格式", 2);
		}
	};

	/**
	 * 关闭弹框
	 */
	handleClose = () => {
		this.setState({
			showMsgBox: false,
			countDownstatus: "disable",
			msgSubTitle: "",
			buttDisabled: true
		});
		this.props.options.msgSubmitButtStatus = "3";
	};

	/**
	 * 输入框输入回调
	 */
	inputChangeAction(value) {
		// console.log("输入框输入回调:", value);
		if (value.length >= 6) {
			this.setState({
				buttDisabled: false,
				messageCodeValue: value
			});
		} else {
			this.setState({
				buttDisabled: true,
				messageCodeValue: value
			});
		}
	}

	/**
	 * 点击获取验证码 反馈回调
	 * @param {} res
	 */
	countDownCallBack() {
		this.sendVerificationCode(OBJS);
	}

	render() {
		// 倒计时组件
		const countParams = {
			status: this.state.countDownstatus,
			nums: this.props.options.time,
			disableClick: "请正确填写手机号",
			sendingClick: "正在发送，请耐心等待",
			callback: () => this.countDownCallBack()
		};
		const msgData = this.props.options; // 页面输入
		return (
			<div className="MSG">
				{this.state.showMsgBox ? (
					<div>
						<div className="maskView"></div>
						<div className="contentView">
							<div className="messagebox">
								<div className="messageBoxHeader">
									<div className="title">{msgData.msgTitle}</div>
									<div className="close" onClick={this.handleClose}></div>
								</div>
								<div className="msg_con">
									<div className="subtitle">
										短信将发送至 {this.state.msgSubTitle}
									</div>
									<div className="messageBoxContent flexBetween">
										<div className="item item_left flexLeft">
											<InputItem
												className="inp"
												type="number"
												placeholder="请输入短信验证码"
												maxLength={"6"}
												onChange={event => this.inputChangeAction(event)}
											/>
											{/* <input
                        className="inp"
                        placeholder="请输入短信验证码"
                        ref="messageCode"
                      
                        type="tel"
                        maxLength="6"
                      /> */}
										</div>
										<div className="item item_right">
											<Countdown ref="countdown" params={countParams} />
										</div>
									</div>
									<div
										className={
											this.state.buttDisabled
												? "messageBoxFooter grayButtStyle"
												: "messageBoxFooter blueButtStyle"
										}
										onClick={this.submitButtClick}
									>
										<div
											className={"icon_status_" + msgData.msgSubmitButtStatus}
										></div>
										{msgData.msgSubmitButtText}
									</div>
								</div>
								<div id={"keybordb_" + this.state.spaceID}></div>
							</div>
						</div>
					</div>
				) : null}
			</div>
		);
	}
}
export default MessageBox;
